<template>
  <a-card :bordered="false">
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 应收款信息
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:scrollX}"
        :components="draggableComponent"
        bordered
        rowKey="id"
        :columns="columns1"
        :dataSource="dataSource"
        :loading="loading1"
        class="j-table-force-nowrap"
        >
        <a slot="invoicePaidAmount" slot-scope="text, record" @click="getInvoiceDetail(record)">{{ text }}</a>
      </a-table>
    </div>
    <ErpFinanceInvoiceBillListPenetrate ref="invoiceBillListPenetrate"></ErpFinanceInvoiceBillListPenetrate>
  </a-card>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import { getAction } from '@/api/manage';
import ErpFinanceInvoiceBillListPenetrate from '@/views/scy/penetrate/ErpFinanceInvoiceBillListPenetrate'
import { DragResizable } from '@/mixins/DragResizable'
export default {
  name: 'ErpProjectCollectProgressReportForm',
  mixins: [ DragResizable ],
  components: {
    Ellipsis,
    ErpFinanceInvoiceBillListPenetrate
  },
  watch: {
    projectId: {
      handler (val) {
        console.log('--------------应收款信息--------------', val)
        this.projectId = val
        this.loadData()
      },
      immediate: true
    }
  },
  props: {
    //项目id
    projectId: {
      type: String,
      default: 'undefined',
      required: false
    }
  },
  data() {
    return {
      /* 排序参数 */
      isorter: {
        column: '',
        order: '',
      },
      url: {
        list: '/api/erp/project/report/erpProjectContractReport/queryCollectPaymentList'
      },
      loading1: false,
      dataSource1: [],
      dataSource: [],
      columns1: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          fixed: 'left',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '款项名称',
          align: 'center',
          dataIndex: 'nodeName',
          width: 285,
          ellipsis: true
        },
        {
          title: '应收期间',
          align: 'center',
          dataIndex: 'collectionDateDuration',
          width: 285,
          ellipsis: true
        },
        {
          title: '考核月份',
          align: 'center',
          dataIndex: 'assessmentDate',
          width: 285,
          ellipsis: true
        },
        {
          title: '开票金额',
          align: 'center',
          dataIndex: 'invoicePaidAmount',
          scopedSlots: { customRender: 'invoicePaidAmount' },
          width: 285,
          ellipsis: true
        },
        {
          title: '应收金额',
          align: 'center',
          dataIndex: 'collectMoney',
          width: 285,
          ellipsis: true
        },
        {
          title: '款项节点说明',
          align: 'center',
          dataIndex: 'nodeDesc',
          width: 285,
          ellipsis: true
        }
      ]
    }
  },

  computed: {
  },
  created() {
    this.customKey = 'columns1'
    this.columns1width = this.columns1.map(val => {
      return val.width
    })
  },
  mounted() {
  },
  methods: {
    getInvoiceDetail(record) {
      //先清空数据
      this.$refs.invoiceBillListPenetrate.dataSource = []
      this.$refs.invoiceBillListPenetrate.ipagination.total = 0
      //查询数据
      this.$refs.invoiceBillListPenetrate.loading = true
      this.$refs.invoiceBillListPenetrate.paymentId = record.id
      this.$refs.invoiceBillListPenetrate.searchReset()
      //打开弹窗
      this.$refs.invoiceBillListPenetrate.visible = true
    },
    clearDeail() {
      this.dataSource1 = []
      this.dataSource = []
    },
    async loadData(arg) {
      this.clearDeail()
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = {
        projectId: this.projectId
      };
      // 查询条件
      var param = Object.assign({}, params, this.isorter, {});
      this.loading1 = true;
      let res = await getAction(this.url.list, param)
      this.loading1 = false;
      if (res.success) {
        this.dataSource = res.result || res.result.records;
      }
      this[this.customKey].forEach((val,index) => {
        val.width = this[this.customKey+'width'][index]
      })
    }
  }
}
</script>
<style scoped>
</style>
